<template>
  <div class="overheader-info-con">
    <div class="title-bar">物流/报关</div>
    <a-descriptions :data="declaration" />
    <div class="title-bar">箱规</div>
    <a-table :data="boxSpecList" :pagination="false" class="table-singe-line" size="mini" :scroll="{ y: 180 }">
      <template #columns>
        <a-table-column title="外箱尺寸" :width="260">
          <template #cell="{ record }">
            <a-space v-if="record.volume">
              <div>{{ $extract(record, 'volume.length') ? $extract(record, 'volume.length') : '-' }}×</div>
              <div>{{ $extract(record, 'volume.width') ? $extract(record, 'volume.width') : '-' }}×</div>
              <div>{{ $extract(record, 'volume.height') ? $extract(record, 'volume.height') : '-' }}</div>
              <div>{{ $extract(record, 'volume.unit') }}</div>
            </a-space>
            <div v-else>--</div>
          </template>
        </a-table-column>
        <a-table-column title="单箱数量">
          <template #cell="{ record }">
            <a-space v-if="$extract(record, 'quantity')">
              <div>{{ $extract(record, 'quantity') }}</div>
              <div>pcs</div>
            </a-space>
          </template>
        </a-table-column>
        <a-table-column title="单箱毛重">
          <template #cell="{ record }">
            <a-space v-if="$extract(record, 'groWeight.weight')">
              <div>{{ $extract(record, 'groWeight.weight') }}</div>
              <div>{{ $extract(record, 'groWeight.unit') }}</div>
            </a-space>
          </template>
        </a-table-column>
        <a-table-column title="单箱净重">
          <template #cell="{ record }">
            <a-space v-if="$extract(record, 'netWeight.weight')">
              <div>{{ $extract(record, 'netWeight.weight') }}</div>
              <div>{{ $extract(record, 'netWeight.unit') }}</div>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="title-bar">包装信息</div>
    <a-table :data="packList" size="mini" class="table-two-line mt10" :pagination="false" :scroll="{ x: '100%', y: 200 }">
      <template #columns>
        <a-table-column title="序号" :width="50">
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column title="图片" :width="70">
          <template #cell="{ record }">
            <ImgPopover :src="getImgUrl(record)">
              <template #con>
                <a-image :preview="false" width="40" height="40" fit="contain" :src="getImgUrl(record)" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="包装名称" :width="150">
          <template #cell="{ record }">
            <TextLimit position="top" :rows="2" :val="record.skuName" />
          </template>
        </a-table-column>
        <a-table-column title="SKU" :width="150" data-index="sku" />
        <a-table-column title="长宽高(cm)" :width="80">
          <template #cell="{ record }"> {{ $extract(record, 'volume.length') }}×{{ $extract(record, 'volume.width') }}×{{ $extract(record, 'volume.height') }} </template>
        </a-table-column>
        <a-table-column title="重量(g)" :width="80">
          <template #cell="{ record }">
            {{ $extract(record, 'weight.weight') }}
          </template>
        </a-table-column>
        <a-table-column title="数量" data-index="num" :width="80" />
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'

  const props = defineProps({
    productInfo: {
      type: Object,
      default: () => {},
    },
  })

  const packList = computed(() => props.productInfo?.packingList || [])
  const boxSpecList = computed(() => props.productInfo?.boxSpecList || [])
  const declaration = computed(() => {
    let _declaration = props.productInfo?.declaration || {}
    let arr = [
      { label: '中文报关名', key: 'name' },
      { label: '英文报关名', key: 'nameEn' },
      { label: '报关单价', key: 'amount' },
      { label: '报关重量', key: 'weight' },
      { label: '海关编码', key: 'customsCode' },
      { label: '危险品运输', key: 'dangerLabel' },
    ]
    return arr.map((el: any) => {
      let val = ''
      if (el.key == 'amount') {
        val = _declaration.amount ? `${_declaration.currency ? _declaration.currency : ''} ${_declaration.amount}` : '--'
      } else if (el.key == 'weight') {
        val = _declaration.weight ? `${_declaration.weight} ${_declaration.unit ? _declaration.unit : ''}` : '--'
      } else {
        val = _declaration[el.key] || '--'
      }
      return {
        label: el.label,
        value: val,
      }
    })
  })
  function getImgUrl(record: any) {
    return record.productPicList[0]?.url || ''
  }
</script>

<style lang="less" scoped>
  .overheader-info-con {
    height: 100%;
    overflow: auto;
  }
  .title-bar {
    margin: 5px 0;
  }
</style>
